<template>
	<div id="J_ContBox" class="m-content-box">
		<div class="top-btn-group">
			<router-link to="/system/orderRuleForCommon">
				<el-button type="primary" class="bac6b7">返回</el-button>
			</router-link>
		</div>
		<div class="m-set-order-box">
			<p class="title">失约惩罚设置</p>
			<ul class="set-normal-list mb-30">
				<li>
					<span class="label">期限卡失约惩罚</span>
					<p class="desc">
						<el-radio-group v-model="datalist.punishment">
							<el-radio :label="1">开启</el-radio>
							<el-radio :label="0">关闭</el-radio>
						</el-radio-group>
					</p>
				</li>
			</ul>
			<p class="title">其他设置</p>
			<ul class="set-normal-list mb-30">
				<li>
					<span class="label">可预约天数</span>
					<p class="desc">会员最多可预约<el-input v-model="datalist.rese_day" type="number"
							style="width: 82px; margin:0 10px; text-align: center;" />天的课程，0表示当天</p>
				</li>
			</ul>
		</div>
		<div class="dis disAl disJuC " style="padding: 30px 0;">
			<div class="dis disAl hei34 borRad20 coFFF cuPo bac6b7" style="padding: 0 24px;"
				@click.stop="submitForm">保存</div>
		</div>
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		GeneralDetail,
		GeneralEdit
	} from '@/api/system' // Secondary package based on el-pagination

	export default {
		name: 'ArticleList',
		components: {},
		filters: {
			statusFilter(status) {
				const statusMap = {
					published: 'success',
					draft: 'info',
					deleted: 'danger'
				}
				return statusMap[status]
			}
		},
		data() {
			return {
				datalist: {
					punishment: 0,
					rese_day: ''
				},
				url: ''
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '通用设置',
				url: '/system/orderRuleForCommon',
				pd: true
			}, {
				name: '团课',
				url: '/system/orderRuleForLeague',
				pd: true
			}, {
				name: '精品课',
				url: '/system/orderRuleForQuality',
				pd: true
			}, {
				name: '私教课',
				url: '/system/orderRuleForPrivate',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.url = '/system/orderRuleForCommon'
			this.getList()
		},
		methods: {
			fanhui() {
				this.$router.go(-1)
			},
			submitForm() {
				const params = this.datalist
				if (params.rese_day == '') {
					return this.$message({
						message: '请输入天数',
						type: 'warning'
					})
				}
				GeneralEdit(params).then(response => {
					const {
						data
					} = response
					this.fanhui()
					this.listLoading = false
				}).catch(error => {
					console.log(error)
					this.listLoading = false
				})
			},
			getList() {
				this.listLoading = true
				const params = {}
				GeneralDetail(params).then(response => {
					const {
						data
					} = response
					console.log(response)
					if (data) {
						this.datalist = data
					}
					console.log(data)
					this.listLoading = false
				}).catch(error => {
					console.log(error)
					this.listLoading = false
				})
				this.listLoading = false
			},
			open(type) {
				if (type === 'add') {
					this.add_show = false
				}
				if (type === 'update') {
					this.update_show = false
				}
			}

		}
	}
</script>

<style scoped>
	.m-content-box {
		position: relative;
		padding: 30px 63px;
		font-size: 14px;
	}

	.top-btn-group {
		position: relative;
		display: flex;
		justify-content: flex-end;
		margin-top: -18px;
		margin-bottom: 12px;
	}

	.setting-tips__normal {
		padding: 10px 15px;
		display: flex;
		align-items: center;
		border: 1px dashed #f49352;
		color: #f49352;
	}

	.m-set-order-box {
		position: relative;
		margin-bottom: 30px;
	}

	.mb-30 {
		margin-bottom: 30px;
	}

	.tips-icon {
		margin-right: 8px;
	}

	img {
		max-width: 100%;
	}

	img {
		border: 0;
	}

	.m-set-order-box .title {
		position: relative;
		color: #787878;
		font-size: 12px;
		height: 22px;
	}

	.set-normal-list li:nth-child(odd) {
		background: #f2f2f2;
	}

	.set-normal-list li {
		position: relative;
		min-height: 19px;
		padding: 5px 10px 5px 170px;
	}

	.set-normal-list .label {
		position: absolute;
		left: 10px;
		top: 15px;
	}

	ul,
	dl,
	ol {
		list-style: none;
		padding: 0;
		margin-top: 0;
	}

	p {
		margin: 0;
		padding: 0;
		font-weight: 400;
	}

	.desc {
		height: 36px;
		line-height: 32px;
	}
	
	::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
		color: #6b7cdd;
	}
	
	::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
	.el-checkbox__input.is-indeterminate .el-checkbox__inner {
		border-color: #6b7cdd !important;
		background-color: #6b7cdd !important;
	}
	
	::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
		color: #6b7cdd !important;
	}
	
	::v-deep .el-checkbox__inner:hover {
		border-color: #6b7cdd !important;
	}
	
	::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
		border-color: #6b7cdd !important;
	}
	
	::v-deep .el-radio__input.is-checked+.el-radio__label {
		color: #6b7cdd !important;
	}
	
	::v-deep .el-radio__input.is-checked .el-radio__inner {
		background: #6b7cdd !important;
		border-color: #6b7cdd !important;
	}
</style>